<template>
  <div class="top-right-btn">
    <el-row>
      <el-tooltip
        class="item"
        effect="dark"
        :content="content"
        placement="top"
      >
        <el-button
          v-if="hasSearch"
          size="mini"
          circle
          icon="el-icon-search"
          @click="toggleSearch()"
        />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" :content="$t('refresh')" placement="top">
        <el-button
          size="mini"
          circle
          icon="el-icon-refresh"
          @click="refresh()"
        />
      </el-tooltip>
      <el-tooltip
        v-if="columns"
        class="item"
        effect="dark"
        :content="$t('showOrHide')"
        placement="top"
      >
        <el-button
          size="mini"
          circle
          icon="el-icon-menu"
          @click="showColumn()"
        />
      </el-tooltip>
    </el-row>
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-transfer
        v-model="value"
        :titles="[$t('show'), $t('hide')]"
        :data="columns"
        @change="dataChange"
      />
    </el-dialog>
  </div>
</template>
<script>
import { setPageColumns } from '@/utils/auth'
export default {
  name: 'RightToolbarMemory',
  props: {
    showSearch: {
      type: Boolean,
      default: true
    },
    // eslint-disable-next-line vue/require-default-prop
    columns: {
      type: Array
    },
    hasSearch: {
      type: Boolean,
      default: true
    },
    pageName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 显隐数据
      value: [],
      // 弹出层标题
      title: this.$t('showHide'),
      content: this.$t('hideSearch'),
      // 是否显示弹出层
      open: false
    };
  },
  created() {
    // 显隐列初始默认隐藏列
    // console.log(this.columns)
    for (const item in this.columns) {
      if (this.columns[item].visible === false) {
        this.value.push(this.columns[item].key);
      }
    }

    // console.log(this.value);
  },
  methods: {
    // 搜索
    toggleSearch() {
      this.$emit('update:showSearch', !this.showSearch);
      this.bus.$emit('showSearch', this.showSearch)
      if (this.showSearch) {
        this.content = this.$t('showSearch')
      } else {
        this.content = this.$t('hideSearch')
      }
    },
    // 刷新
    refresh() {
      this.$emit('queryTable');
    },

    updateColumns(data) {
      this.columns = data
    },
    // 右侧列表元素变化
    dataChange(data) {
      for (var item in this.columns) {
        const key = this.columns[item].key;
        this.columns[item].visible = !data.includes(key);
      }

      setPageColumns(this.$store.getters.username + '_' + this.pageName, this.columns)
    },
    // 打开显隐列dialog
    showColumn() {
      this.open = true;
    }
  }
};
</script>
  <style lang="scss" scoped>
  ::v-deep .el-transfer__button {
    border-radius: 50%;
    padding: 12px;
    display: block;
    margin-left: 0px;
  }
  ::v-deep .el-transfer__button:first-child {
    margin-bottom: 10px;
  }
  </style>

